<template>
	<view class="page" style="background: #ffffff;">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">编辑地址管理</block></cu-custom>
		<view class="content">
			<view class="row">
				<view class="nominal">
					收件人
				</view>
				<view class="input">
					<input placeholder="请输入收件人姓名" type="text" v-model="name" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入收件人电话号码" type="number" v-model="mobile" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @click="btnClick">
					<view v-if="!province" style="color:#888">
						请选择所在地区
					</view>
					<text v-model="region" v-else>
						{{province || ''}}{{city || ''}}{{county || ''}}{{town|| ''}}
					</text>
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					详细地址
				</view>
				<view class="input">
					<input placeholder="输入详细地址" type="text" v-model="addr" style="height:3em;width: 100%;flex: 1;font-size: 28upx;padding: 0;"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					别名
				</view>
				<view class="input">
					<input placeholder="如 家, 公司等" type="text" v-model="address_name" />
				</view>
			</view>
			<view class="row" v-if="izShowDefault">
				<view class="nominal">
					设置默认地址
				</view>
				<view class="input switch">
					<switch color="#f06c7a" :checked="isDefault" @change='isDefaultChange' />
				</view>
			</view>
		</view>
		<selectAddress style="zIndex:9999;" ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
		<view class="save" @tap="save">
			<view class="btn">
				保存地址
			</view>
		</view>
	</view>
</template>

<script>
	import * as Addr_API from '@/api/member/address.js'
	// import * as Base_API from '@/api/base.js'
	import { api, api_model } from '@/ui-domain'
	import * as Checkout_API from '@/api/checkout.js'
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
	import * as RegExp from '@/utils/RegExp.js'
	export default {
	    components: {selectAddress},
		data() {
			return {
				regionValue: [],
				showRegion: false,
				editType:'',
				id:'',
				name:'',
				mobile:'',
				addr:'', // 详细地址
				address_name:'',
				isDefault:false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				region: [
					{
						local_name:'贵州省'
					},
					{
						local_name:'贵阳市'
					},
					{
						local_name:'云岩区'
					}
				],
				areaList:[],
				addrList:{},
				province:'', // 配送省份
				city:'', // 配送城市
				county:'', // 配送地区-区(县)
				town:'', // 配送街道
				province_id:null,
				city_id:null,
				county_id:null,
				town_id:null,
				izDefalutAddr:false,
				addType:0,
				izOrder:0,
				region:null,
				izShowDefault:false,
			}
		},
		methods: {
			GET_Region(id){
				console.log(api.base)
				uni.request({
					url: api.base + '/regions/'+id+'/children',
					success:res=>{
						this.areaList = res
						console.log('地区', res)
					}
				})
				// Base_API.Regions(id).then(res =>{
				// 	// console.log('地区', res)
				// 	this.areaList = res
				// }) 
			},
			bindRegionChange(e) {
			    console.log('picker发送选择改变，携带值为', e)
			    this.region = e.detail.value
			},
			onCancel(e) {
				// console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.region = e;
				this.cityPickerValue = e.value;
			},
			isDefaultChange(e){
				this.isDefault = e.detail.value;
				
			},
			save(){
				if(!this.town_id || this.town_id ==''){
					this.region = this.county_id
				}else{
					this.region =this.town_id
				}
				let data = {
					name:this.name,
					// head:this.name.substr(0,1),
					mobile:this.mobile,
					addr:this.addr,
					isDefault:this.isDefault,
					ship_address_name:this.address_name,
					province:this.province,
					city:this.city,
					county:this.county,
					town:this.town,
					province_id:this.province_id,
					city_id:this.city_id,
					county_id:this.county_id,
					town_id:this.town_id,
					region:this.region
				}
				// if(this.editType=='edit'){
				// 	data.id = this.id
				// }
				if(!data.name){
					uni.showToast({title:'请输入收件人姓名',icon:'none'});
					return ;
				}
				if(!data.mobile){
					uni.showToast({title:'请输入收件人电话号码',icon:'none'});
					return ;
				}
				if(!RegExp.mobile.test(data.mobile)){
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				if(!data.province || !data.city){
					uni.showToast({title:'请选择地区',icon:'none'});
					return this.onCityClick();
				}
				if(!data.addr){
					uni.showToast({title:'请输入收件人详细地址',icon:'none'});
					return ;
				}
				if(data.isDefault){
					data.def_addr = 1
				}else{
					data.def_addr = 0
				}
				if(this.izDefalutAddr){
					if(!data.isDefault){
						Addr_API.setDefaultAddr(this.id).then(res =>{})
					}
				}
				uni.showLoading({
					title:'正在提交'
				})
				if(this.editType==='edit'){
					Addr_API.updateAddr(this.id,data).then(res =>{
						uni.hideLoading();
						if(res.addr_id){
							uni.showToast({
								title:'修改成功'
							})
							const pages = getCurrentPages()
							const prevPage = pages[pages.length-2] // 上一页
							prevPage.setData({refresh : 1})
							if(this.izOrder === 1){
								prevPage.setData({izOrder : 1})
								uni.navigateBack({
									delta: 1
								})
							}else{
								uni.navigateBack()
							}
						}
					})
				}else{
					Addr_API.addAddr(data).then(res =>{
						uni.hideLoading();
						uni.showToast({
							title:'已新增一条地址'
						})
						const pages = getCurrentPages()
						const prevPage = pages[pages.length-2] // 上一页
						prevPage.setData({refresh : 1})
						if(this.izOrder === 1){
							prevPage.setData({izOrder : 1})
							uni.navigateBack({
								delta: 1
							})
						}else{
							uni.navigateBack();
						}
					})
				}
			},
			chooseRegion() {
			    this.showRegion =true
			},
			emitHideRegion(e) {
			    this.showRegion =  e.detail.showRegion
			    this.regionValue = e.detail.regionValue
			},
			onCityClick(e){
			    this.provinceName=e.province.label;
			    this.cityName=e.city.label;
			    this.countyName=e.county.label;
			    this.townName=e.town.label;
			    this.togglePopup()
			},
			togglePopup(){
				this.tankuang.close()
			},
			btnClick() {
				this.region =  [
					{
						local_name:'贵州省'
					},
					{
						local_name:'贵阳市'
					},
					{
						local_name:'云岩区'
					}
				],
			    this.$refs.selectAddress.show()
			},
			successSelectAddress(address){ //选择成功回调
				this.region=[]
				this.town = ''
				this.town_id = null
				address.map(item =>{
					if(item.local_name){
						this.region.push(item)
					}
					if(item.region_grade === 1){
						this.province = item.local_name
						this.province_id = item.id
					}else if(item.region_grade === 2){
						this.city = item.local_name
						this.city_id = item.id
					}else if(item.region_grade === 3){
						this.county = item.local_name
						this.county_id = item.id
					}else if(item.region_grade === 4){
						this.town = item.local_name
						this.town_id = item.id
					}
				})
			}
		},
		onLoad(e) {
			if(e.izOrder){
				this.izOrder = e.izOrder
			}
			//获取传递过来的参数
			if(e.id || e.type ==='edit'){
				this.id = e.id 
				let id = parseInt(e.id)
				this.editType = e.type
				Addr_API.getAddr(id).then(res =>{
					this.addrList = res
					this.name = res.name
					this.addr = res.addr
					this.isDefault = res.def_addr===1?true:false
					this.izShowDefault = res.def_addr===1?false:true
					this.izDefalutAddr = res.def_addr===1?true:false
					this.mobile = res.mobile,
					this.address_name = res.ship_address_name,
					this.province = res.province,
					this.city = res.city,
					this.county = res.county,
					this.town = res.town,
					this.province_id = res.province_id,
					this.city_id = res.city_id,
					this.county_id = res.county_id,
					this.town_id = res.town_id
				})
			}else if(e.add){
				this.addType = 1
			}
		},
		onBackPress() {
		},
		onUnload() {
		}
	}
</script>
<style lang="scss" scoped>
	.save{
		view{
			display: flex;
		}
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			background-color: $color-main;
			color: #fff;
			justify-content: center;
			align-items: center;
			.icon{
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}
			font-size: 30upx;
		}
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		view{
			display: flex;
		}
		.row{
			width: 94%;
			margin: 0 3%;
			border-top: solid 1upx #eee;
			.nominal{
				width: 30%;
				height: 100upx;
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}
			.input{
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;
				&.switch{
					justify-content: flex-end;
				}
				.textarea{
					margin: 20upx 0;
					min-height: 120upx;
				}
			}
			.del{
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: $color-main;
				background-color: rgba(255,0,0,0.05);
				border-bottom: solid 1upx #eee;
			}
		}
	}
</style>
